<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="400px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<!-- <script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.fillStyle="#eeeeef";
	context.fillRect(0,0,400,400)
	context.translate(200,50)
	context.fillStyle="rgba(255,0,0,0.5)"
	for (var i = 0; i<50;i++) {
		context.translate(25,25);
		context.scale(0.95,0.95);
		context.rotate(Math.PI/10);
		context.fillRect(0,0,100,50)
	}
</script>

 -->
 <script type="text/javascript">
 	var canvas = document.getElementById("mycanvas");
 	var context = canvas.getContext("2d");
 	context.shadowBlur = 10;
 	context.shadowOffsetX = 50;
 	context.shadowOffsetY = 20;
 	context.shadowColor = "black";
 	context.fillStyle = "red";
 	context.fillRect(20,50,100,50)
 </script>